<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>demo01</title>
	<link rel="stylesheet" href="./style.css">
</head>

<body>
	<!-- 标题 -->
	<h1>标题1</h1>

	<!-- 段落 -->
	<a href="http://www.baidu.com" target="_blank">跳转到百度</a>

	<!-- 下拉框 -->
	<select>
		<option value="桂林">桂林</option>
		<option value="南宁">南宁</option>
		<option value="北海">北海</option>
		<option value="柳州">柳州</option>
	</select>

	<!-- table表 -->
	<table border="1">
		<caption>
			表格大标题
		</caption>
		<tr>
			<th>序号</th>
			<th>姓名</th>
			<th>年龄</th>
			<th>工位号</th>
		</tr>
		<tr>
			<td>1</td>
			<td>小明</td>
			<td>18</td>
			<td>A001</td>
		</tr>
		<tr>
			<td>2</td>
			<td>小黑</td>
			<td>19</td>
			<td>A002</td>
		</tr>
		<tr>
			<td>总计</td>
			<!-- 占据多个列的位置 -->
			<td colspan="3">xxx</td>
		</tr>
	</table>

	<!-- 表单 -->
	<form action="#" method="post">
		<p>
			<span>账号：</span>
			<input type="text" placeholder="请输入账号">
		</p>
		<p>
			<span>密码：</span>
			<input type="password" placeholder="请输入密码">
		</p>
		<input type="submit" value="登录按钮">
		<input type="reset" value="复位按钮">
		<!-- 时间选择 -->
		<input type="datetime-local" value="时间选择">
	</form>

	<!-- 按钮 -->
	<button type="reset">点坤我</button>

	<!-- 无意义标签 -->
	<div>
		<span>无意义标签（行内式）</span>
	</div>

	<!-- 字符实体 -->
	&nbsp;
	&copy;

	<!-- div and span -->
	<div class="box">
		<span class="say">Hello CSS</span> <br>
		<span>2222</span> <br>
		<span>3333</span>
	</div>

	<!-- 图像 -->
	<img src="./img/m5.jpg" alt="猫咪" title="猫咪" width="100" height="100">
	<img src="" alt="猫咪">

</body>

</html>